<template>
  <view class="container">
    <!-- 订单状态筛选 -->
    <view class="status-filter">
      <view 
        class="status-item" 
        :class="{ active: activeStatus === item.value }"
        v-for="item in statusList" 
        :key="item.value"
        @click="filterOrders(item.value)"
      >
        {{ item.label }}
      </view>
    </view>
    
    <!-- 订单列表 -->
    <scroll-view class="order-list" scroll-y>
      <view class="order-item" v-for="order in orderList" :key="order.id" @click="goToOrderDetail(order.id)">
        <view class="order-header">
          <text class="station-name">{{ order.stationName }}</text>
          <text class="order-status" :class="'status-' + order.status">
            {{ getOrderStatusText(order.status) }}
          </text>
        </view>
        <view class="order-content">
          <view class="order-info">
            <text class="info-item">订单号: {{ order.orderNo }}</text>
            <text class="info-item">充电桩: {{ order.gunCode }}</text>
            <text class="info-item">充电量: {{ order.power }}</text>
            <text class="info-item">充电时长: {{ order.duration || '02:00:15' }}</text>
          </view>
          <view class="order-amount">
            <text class="amount-label">费用</text>
            <text class="amount-value">¥{{ order.amount }}</text>
          </view>
        </view>
        <view class="order-footer">
          <text class="order-time">{{ order.startTime }}</text>
          <view class="order-actions">
            <button 
              v-if="order.status === 1" 
              class="action-btn"
              @click.stop="applyRefund(order.id)"
            >
              申请退款
            </button>
            <button 
              v-if="order.status === 2" 
              class="action-btn primary"
              @click.stop="stopCharging(order.id)"
            >
              结束充电
            </button>
            <button 
              v-if="order.status === 1 || order.status === 3" 
              class="action-btn"
              @click.stop="deleteOrder(order.id)"
            >
              删除订单
            </button>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="orderList.length === 0" class="empty-state">
        <image class="empty-icon" src="/static/icons/order-empty.png"></image>
        <text class="empty-text">暂无订单</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      activeStatus: 'all',
      statusList: [
        { label: '全部', value: 'all' },
        { label: '已完成', value: 1 },
        { label: '充电中', value: 2 },
        { label: '已取消', value: 3 }
      ],
      orderList: []
    }
  },
  onLoad() {
    this.getOrderList()
  },
  methods: {
    // 获取订单列表
    async getOrderList() {
      try {
        const res = await api.order.getOrderList()
        if (res.code === 200) {
          this.orderList = res.data
        }
      } catch (error) {
        console.error('获取订单列表失败:', error)
      }
    },
    
    // 筛选订单
    filterOrders(status) {
      this.activeStatus = status
      uni.showToast({
        title: `筛选${status === 'all' ? '全部' : this.statusList.find(s => s.value === status).label}订单`,
        icon: 'none'
      })
    },
    
    // 获取订单状态文本
    getOrderStatusText(status) {
      const statusMap = {
        1: '已完成',
        2: '充电中',
        3: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 跳转到订单详情
    goToOrderDetail(id) {
      uni.navigateTo({
        url: `/pages/order/detail?id=${id}`
      })
    },
    
    // 申请退款
    applyRefund(id) {
      uni.showToast({
        title: `申请退款订单${id}`,
        icon: 'none'
      })
    },
    
    // 结束充电
    stopCharging(id) {
      uni.showToast({
        title: `结束充电订单${id}`,
        icon: 'none'
      })
    },
    
    // 删除订单
    deleteOrder(id) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该订单吗？',
        success: (res) => {
          if (res.confirm) {
            this.orderList = this.orderList.filter(order => order.id !== id)
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.status-filter {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.status-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
}

.status-item.active {
  color: #007aff;
  border-bottom: 4rpx solid #007aff;
}

.order-list {
  flex: 1;
  padding: 20rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx dashed #f5f5f5;
}

.station-name {
  font-size: 32rpx;
  font-weight: bold;
}

.order-status {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.status-1 {
  color: #4cd964;
  background-color: #e8fff0;
}

.status-2 {
  color: #007aff;
  background-color: #e8f4ff;
}

.status-3 {
  color: #ccc;
  background-color: #f5f5f5;
}

.order-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.order-info {
  flex: 1;
}

.info-item {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.order-amount {
  text-align: right;
}

.amount-label {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.amount-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6600;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

.order-actions {
  display: flex;
}

.action-btn {
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  margin-left: 10rpx;
  border: 1rpx solid #ccc;
  background-color: #fff;
  border-radius: 5rpx;
}

.action-btn.primary {
  background-color: #007aff;
  color: #fff;
  border-color: #007aff;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}

.empty-icon {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>